<template>
	<view>
		<image src="https://aliyunoss.hntgov.net/sd/ali_syqylynk.png" mode="aspectFill"
			style="width: 526rpx;height: 82rpx;margin-top: 54rpx;margin-left: 112rpx;"></image>
		<image @click="toGoods(firstCard.goods.id)"
			:src="firstCard.goods.mainPic||'https://aliyunoss.hntgov.net/sd/all_moren.png'" mode="aspectFill"
			class="sy_shengka"></image>
		<view class="sy_shengka_price" @click="toGoods(firstCard.goods.id)">
			<text style="color: #FF4A41;font-size: 40rpx;" v-if="firstCard"><text
					style="font-size: 28rpx;">￥</text>{{(firstCard.skuList[0].buyPrice/100).toFixed(0)}}</text>
			<view class="sy_shengka_shop">立即购买</view>
		</view>

		<image src="https://aliyunoss.hntgov.net/sd/ali_sy_sjlynk.png"
			style="width: 526rpx;height: 82rpx;margin-top: 60rpx;margin-left: 112rpx;"></image>
		<view class="sy_sjrq">
			<view class="sy_sjrq_item" v-for="(item,index) in priCardList" :key="index" @click="toGoods(item.goods.id)">
				<image :src="item.goods.mainPic||'https://aliyunoss.hntgov.net/sd/all_moren.png'" mode="aspectFill">
				</image>
				<view class="sy_sjrq_item_name">{{item.modelName||''}}</view>
				<!-- <text
					style="padding-left: 10rpx;color: #BCBCBC;font-size: 24rpx;margin-top: 10rpx;">已售{{item.salesNum||0}}件</text> -->

				<view class="sy_shengka_price"
					style="width: 320rpx;margin-left: 0rpx;background:none;padding-left: 10rpx;">
					<text style="color: #FF4A41;font-size: 40rpx;"><text
							style="font-size: 28rpx;">￥</text>{{(item.skuList[0].buyPrice/100).toFixed(0)}}</text>
					<view class="sy_shengka_shop" style="width: 136rpx;height: 56rpx;font-size: 22rpx;right: 10rpx;">
						立即购买</view>
				</view>
			</view>
		</view>

		<image src="https://aliyunoss.hntgov.net/sd/ali_sy_dslynk.png"
			style="width: 526rpx;height: 82rpx;margin-top: 60rpx;margin-left: 112rpx;"></image>
		<view class="sy_sjrq">
			<view class="sy_sjrq_item" v-for="(item,index) in cityCardList" :key="index"
				@click="toGoods(item.goods.id)">
				<image :src="item.goods.mainPic||'https://aliyunoss.hntgov.net/sd/all_moren.png'" mode="aspectFill">
				</image>
				<view class="sy_sjrq_item_name">{{item.modelName||''}}</view>
				<text
					style="padding-left: 10rpx;color: #BCBCBC;font-size: 24rpx;margin-top: 10rpx;">已售{{item.salesNum||0}}件</text>

				<view class="sy_shengka_price"
					style="width: 320rpx;margin-left: 0rpx;background:none;padding-left: 10rpx;">
					<text style="color: #FF4A41;font-size: 40rpx;"><text
							style="font-size: 28rpx;">￥</text>{{(item.skuList[0].buyPrice/100).toFixed(0)}}</text>
					<view class="sy_shengka_shop" style="width: 136rpx;height: 56rpx;font-size: 22rpx;right: 10rpx;">
						立即购买</view>
				</view>
			</view>
		</view>

		<view class="index_fiexd" @click="toCouponList()">
			<image src="https://aliyunoss.hntgov.net/h5/zfb_index_yhq.png" style="width: 68rpx;height: 50rpx;"
				mode="aspectFit"></image>
			<text>优惠券</text>
		</view>

		<u-popup-tm v-model="isPopuWinActive" mode='center' height='840' border-radius='10' width='560' :mask='true'
			style='background-color: #00000000;'>

			<image src="https://aliyunoss.hntgov.net/sd/zfb_active.png" style="width: 560rpx;height: 670rpx;"
				@tap='toCouponList()' class="bj_hui"></image>
			<image src="http://cdn.hntgov.net/online/static/activewin.png"
				style="width: 80rpx;height: 80rpx;margin-left: 240rpx;margin-top: 60rpx;" @tap='closeActive()'>
			</image>
		</u-popup-tm>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPopuWinActive: false,
				title: 'Hello',
				firstCard: '',
				cityCardList: [],
				priCardList: []
			}
		},
		onLoad() {
			this.getListProductUrlMethod()
			// if (new Date().getTime() > new Date('2025/09/16 00:00:00').getTime()) {
			// 	this.isPopuWinActive = true
			// }
		},
		methods: {
			closeActive() {
				this.isPopuWinActive = false
			},
			toCouponList() {
				// my.navigateToAlipayPage({
				//   path: 'https://ur.alipay.com/_1iMqE2ABgI0HwYrgoLq69n' //必须使用render.alipay.com域名
				// });
				// my.openMerchantVoucherList({ 
				//   partnerId:'2088321023823578',
				//   success: (res) => {
				//     console.log('调用成功后的回调', res)
				//   },
				//   fail: (error) => {
				//     console.log('调用失败后的回调', error)
				//   }
				// });
				if (uni.getStorageSync('phone')) {
					uni.navigateTo({
						url: '/pages/index/couponlist'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/authorization'
					})
				}
				// uni.navigateTo({
				// 	url: '/pages/goods/goods?goodsId=665517685594885'
				// })
			},
			toGoods(e) {
				uni.navigateTo({
					url: '/pages/goods/goods?goodsId=' + e
				})
			},
			getListProductUrlMethod() {
				this.$u.api.getListProductUrl({
					type: 0
				}).then(res => {
					if (res) {
						this.firstCard = res.data[0]
						res.data = res.data.slice(1)
						console.log(res.data);
						res.data.forEach(item => {
							if (item.goodsInfo.propagatePic != null) {
								item.goodsInfo.propagatePic = item.goodsInfo.propagatePic.split(',')
							}

							if (item.cardModel.cardModelType == 'CITYCARD') {
								this.cityCardList.push(item)
							} else if (item.cardModel.cardModelType == 'PROVINCECARD') {
								this.priCardList.push(item)
							}
						})
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #3982EE;
		padding-bottom: 100rpx;
	}
</style>
<style scoped lang="less">
	.index_fiexd {
		width: 100rpx;
		height: 120rpx;
		border-radius: 10rpx;
		position: fixed;
		bottom: 140rpx;
		left: 20rpx;
		background-color: #fffc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		text {
			margin-top: 10rpx;
			color: #333;
			font-size: 24rpx;
		}
	}

	.sy_sjrq_item_name {
		width: 300rpx;
		color: #4A4949;
		margin-left: 10rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 1;
	}

	.sy_shengka {
		width: 690rpx;
		height: 690rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;

	}

	.sy_shengka_price {
		width: 690rpx;
		height: 96rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		display: flex;
		align-items: center;
		position: relative;
		padding-left: 30rpx;
		margin-top: -8rpx;

		.sy_shengka_shop {
			width: 168rpx;
			height: 56rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: linear-gradient(90deg, #FF3F3C -8%, #FFA371 107%);
			border-radius: 56rpx;
			position: absolute;
			right: 30rpx;
		}
	}

	.sy_sjrq {
		width: 690rpx;
		margin-left: 30rpx;
		background: linear-gradient(180deg, #E3F0FC 0%, #98CDFF 100%);
		box-shadow: 0px 8rpx 20rpx 8rpx #3F77E7;
		padding: 64rpx 16rpx 40rpx 16rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 18rpx;
		border-radius: 30rpx 90rpx 30rpx 30rpx;
		margin-top: -44rpx;

		.sy_sjrq_item {
			width: 320rpx;
			margin-top: 10rpx;
			background-color: #fff;
			border-radius: 16rpx;

			image {
				width: inherit;
				height: 320rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
			}

			.sy_sjrq_item_name {
				width: 300rpx;
				color: #4A4949;
				margin-left: 10rpx;
				font-size: 28rpx;
				line-height: 50rpx;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				display: -webkit-box !important;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>